<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>员工列表</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<script type="text/javascript" th:src="@{/js/jquery-1.7.2.js}"></script>
		<!-- Custom styles for this template -->
		<link  th:href="@{/css/dashboard.css}" rel="stylesheet">
		<link th:href="@{/webjars/jquery/3.3.1/jquery.js/jquery.min.js}">

	</head>

	<body>
		<!--
			引入抽取的片段
			模板名：会使用thymeleaf的前后缀配置规则进行解析
		-->
		<div th:replace="commons/bar :: topbar"></div>

		<div class="container-fluid">
			<div class="row">
				<!-- 引入侧边栏 -->
				<div th:replace="~{commons/bar :: #leftBar(empUri='emps')}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<div class="container">
						<div class="row">
							<span>
									<svg width="3em" height="3em" viewBox="0 -1 17 17" class="bi bi-layout-text-sidebar" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
										<path fill-rule="evenodd" d="M11 15V1h1v14h-1zM3 3.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
									</svg>&nbsp;
								</span>
							<h2 class="col-md-3">
								员工列表
							</h2>

								<form class="form-inline" th:action="@{/searchEmployees}">
									<input class="form-control mr-sm-2" name="employeeName" th:value="${employeeName}" type="search" placeholder="请输入员工姓名" aria-label="Search">
									<button id="searchBtn" class="btn btn-outline-info my-2 my-sm-0" type="submit">
										搜索
									</button>
								</form>

							<div class="col-md-3 offset-md-1">
								<a th:href="@{/employee}" class="btn btn-success" >
									<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 -300 2000 2200"><path fill="#ffffff" d="M1664 840h-576V264q0-52-38-90t-90-38H832q-52 0-90 38t-38 90v576H128q-52 0-90 38T0 968v128q0 52 38 90t90 38h576v576q0 52 38 90t90 38h128q52 0 90-38t38-90v-576h576q52 0 90-38t38-90V968q0-52-38-90t-90-38z"></path></svg>
									新增员工
								</a>
							</div>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-striped table-hover">
							<thead class="thead-dark">
								<tr>
									<th>ID</th>
									<th>姓名</th>
									<th>邮箱</th>
									<th>性别</th>
									<th>部门</th>
									<th>薪资</th>
									<th>生日</th>
									<th>操作</th>
								</tr>
							</thead>

							<tbody th:if="${isEmpty == null}">
								<tr th:each="emp:${employees}">
									<th th:text="${emp.id}"></th>
									<td th:text="${emp.lastName}"></td>
									<td th:text="${emp.email}"></td>
									<td th:text="${emp.gender} == '0'?'女':'男'"></td>
									<!--/*@thymesVar id="department" type=""*/-->
									<td th:text="${emp.department.departmentName}"></td>
									<td th:text="${emp.salary}">10000</td>
									<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd')}"></td>
									<td>
										<a th:href="@{/employee/{id}(id=${emp.id})}" class="btn btn-primary btn-sm">
											<svg id="i-edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 32 32" width="16" height="18" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
												<path d="M30 7 L25 2 5 22 3 29 10 27 Z M21 6 L26 11 Z M5 22 L10 27 Z" />
											</svg>
											编辑
										</a>
										<button th:attr="delete_url=@{/employee/{id}(id=${emp.id})}" class="btn btn-danger btn-sm" id="deleteBtn">
											<svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 -500 2000 2600"><path fill="#ffffff" d="M0 344V232q0-40 28-68t68-28h448l36-76q12-24 36-38t52-14h456q28 0 52 14t36 38l36 76h448q40 0 68 28t28 68v112q0 20-14 34t-34 14H48q-20 0-34-14T0 344zm1664 224v1296q0 80-56 136t-136 56H320q-80 0-136-56t-56-136V568q0-20 14-34t34-14h1440q20 0 34 14t14 34zM712 840q0-28-26-46t-66-18q-40 0-66 18t-26 46v896q0 28 26 46t66 18q40 0 66-18t26-46V840zm552 0q0-28-26-46t-66-18q-40 0-66 18t-26 46v896q0 28 26 46t66 18q40 0 66-18t26-46V840z"></path></svg>
											删除
										</button>
									</td>
								</tr>
							</tbody>

						</table>
						<div th:if="${isEmpty != null}" class="text-center">
							<h3>

								<a th:href="@{/employees}" style="color: red">
									未找到【[[${employeeName}]]】！点击回到员工列表！</a>
							</h3>
						</div>
					</div>

					<div class="col-md-6 offset-1" th:if="${isEmpty == null}">
						<div class=" col-sm-7 text-center h6 mark">
							当前第<kbd th:text="${pageInfo.pageNum}"></kbd>页，共有<kbd th:text="${pageInfo.pages}"></kbd>页，总计<kbd th:text="${pageInfo.total}"></kbd>条记录
						</div>
					</div>

					<div class="col-md-4 offset-6" th:if="${isEmpty == null}">
						<nav aria-label="Page navigation example">
							<ul class="pagination">
								<li class="page-item" th:class="${pageInfo.pageNum == 1?'page-item disabled':'page-item'}">
									<a class="page-link" href="#" th:href="@{'/employees?pageNum=1'}">
										首页
									</a>
								</li>

								<li class="page-item">
									<a class="page-link" aria-label="Previous" th:if="${pageInfo.hasPreviousPage}"  th:href="@{'/employees?pageNum='+ ${pageInfo.pageNum-1} }">
										<span aria-hidden="true">&laquo;</span>
									</a>
								</li>

								<li class="page-item active" th:class="${pageNum == pageInfo.pageNum}?'page-item active':'page-item'" th:each="pageNum:${pageInfo.navigatepageNums}">
											<a class="page-link" href="#" th:href="@{'/employees?pageNum='+ ${pageNum} }">[[${pageNum}]]</a>
								</li>

								<li class="page-item">
									<a class="page-link" href="#" th:if="${pageInfo.hasNextPage}" th:href="@{'/employees?pageNum='+${pageInfo.pageNum+1}}" aria-label="Next">
										<span aria-hidden="true">&raquo;</span>
									</a>
								</li>

								<li class="page-item disabled" th:class="${pageInfo.pageNum == pageInfo.pages}?'page-item disabled':'page-item'">
									<a class="page-link"  th:href="@{'/employees?pageNum='+${pageInfo.pages}}" href="#">尾页</a>
								</li>
							</ul>
						</nav>
					</div>

				</main>
				<form method="post" id="deleteForm">
					<input type="hidden" name="_method" value="delete">
				</form>
			</div>
		</div>

<!--		<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>-->
		<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/feather.min.js}" ></script>
		<script>
			$(function () {
				$(document).on("click","#deleteBtn",function () {
					var name = $(this).parents("tr").find("td:eq(0)").text();
					var attr = $(this).attr("delete_url");
					var b = confirm("确定要删除【"+name+"】吗？");
					if (b){
						$("#deleteForm").attr("action",attr).submit();
					}
					return false;
				})

				// $("#searchBtn").click(function () {
				// 	var lastName = $("#searchName").serialize();
				// 	$.ajax({
				// 		url:'/searchEmployees',
				// 		data:lastName,
				// 		type: 'GET'
				// 		// success:function () {
				// 		// 	location.href="http://localhost:8080/employees";
				// 		// }
				// 	})
				// 	return false;
				// })
			})
		</script>
	</body>

</html>